<template>
  <view :style="colorStyle">
    <!-- <image
      src="http://xpj40szpt.signalpha.cn/img/qrcodeBg.png"
      mode="widthFix"
      style="position: absolute; width: 100%; top: 0"
    />
    <view style="height: 100rpx"></view> -->

    <image v-if="poster" :src="poster" mode="widthFix" class="poster"></image>
    <image
      src="@/static/img41.png"
      mode=""
      class="closeIcon"
      @click.stop="$emit('closeChange')"
    />
    <canvas
      :style="{ height: `${canvasHeight}px` }"
      canvas-id="canvas"
      disable-scroll="true"
      class="canvasBox"
    ></canvas>

    <view style="height: 130rpx"> </view>
    <view class="infobox3">
      <view class="block1" @click.stop="saveImg"> 保存图片 </view>
    </view>
  </view>
</template>

<script>
import { userinfo, goodsInfo, codeSetScene } from "@/servers/servers.js";
import { HTTP_STATUS } from "@/servers/config.js";
import colors from "@/mixins/color";
import { go, loading, msg } from "../../utils/wxAPI";
import { getToken } from "../../utils/storage";
import baseUrl from "@/servers/baseUrl";
const md5 = require("@/utils/md5");
export default {
  mixins: [colors],
  props: {
    info: {
      default: {},
    },
    user: {
      default: {},
    },
    qrcode: {
      default: "",
    },
    poster: {
      default: "",
    },
  },
  data() {
    return {
      imgHeight: 0,
      canvasHeight: 0,
      width: uni.getSystemInfoSync().windowWidth,
      height: uni.getSystemInfoSync().windowHeight,
      bgImg:
        "https://file.slmy10000.com/20240726/aef2347ab67e18ca5806fb455ea43f76.png",
      localImg: "",
      options: {},
    };
  },
  async mounted() {
    console.log(this.poster);
    console.log(this.info);
    if (!this.poster) {
      /***下载二维码****/
      this.downloadFileBgImg();
    }
  },
  methods: {
    async downloadFileBgImg() {
      uni.downloadFile({
        url: this.info.img,
        header: {
          "Access-Control-Expose-Headers": "Content-Disposition",
        },
        success: async (res) => {
          let tempFilePath = res.tempFilePath;
          uni.getImageInfo({
            src: tempFilePath,
            success: async (res) => {
              let imgHeight = res.height * (this.width / res.width);
              this.imgHeight = imgHeight;
              this.canvasHeight = imgHeight + 130;
              this.localImg = res.path;
              setTimeout(() => {
                this.canvasPainting();
              }, 1000);
            },
            fail: (err) => {
              console.log(err);
            },
          });
        },
        fail: (err) => {
          console.log(err);
        },
      });
    },
    async canvasPainting() {
      if (this.poster) return uni.hideLoading();
      loading();
      let context = uni.createCanvasContext("canvas");
      context.setFillStyle("#fff");
      context.fillRect(0, 0, this.width, this.canvasHeight);
      context.drawImage(this.localImg, 0, 0, this.width, this.imgHeight);

      context.drawImage(
        this.qrcode,
        this.width - 90 - 15,
        this.imgHeight + 30,
        90,
        90
      );

      context.setFillStyle("#1F1F1F"); //字体颜色
      context.font = "normal bold 20px sans-serif";
      context.textAlign = "left"; //文字居中
      context.fillText(
        `${
          this.info.name.length > 14
            ? this.info.name.substring(0, 14) + "..."
            : this.info.name
        }`,
        15,
        this.imgHeight + 35
      );

      context.setFillStyle("#DD5C5C"); //字体颜色
      context.font = "normal bold 16px sans-serif";
      context.textAlign = "left"; //文字居中
      context.fillText(`￥`, 15, this.imgHeight + 80);
      context.setFillStyle("#DD5C5C"); //字体颜色
      context.font = "normal bold 24px sans-serif";
      context.textAlign = "left"; //文字居中
      context.fillText(`${this.info.goodsPrice}`, 32, this.imgHeight + 80);
      context.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 可以继续绘制
      context.stroke();
      context.setStrokeStyle("#fff");
      context.draw();

      let that = this;
      setTimeout(() => {
        uni.canvasToTempFilePath({
          x: 0,
          y: 0,
          width: that.width,
          height: that.canvasHeight,
          canvasId: "canvas",
          success(res) {
            console.log(res);
            let poster = res.tempFilePath;
            // that.poster = poster;
            that.$emit("posterChange", poster);
            // console.log(poster)
            uni.hideLoading();
          },
          fail(err) {
            console.log(!this.poster);
            console.log(err);
            uni.hideLoading();
          },
        });
      }, 500);
    },
    saveImg() {
      // this.canvasPainting()
      // #ifdef H5
      msg("请长按图片保存");
      // #endif
      // #ifdef MP-WEIXIN
      loading();
      uni.saveImageToPhotosAlbum({
        filePath: this.poster,
        success(res) {
          msg("保存成功");
        },
        fail(err) {
          if (err.errMsg == "saveImageToPhotosAlbum:fail auth deny") {
            uni.showModal({
              title: "提示",
              content: "请点击打开权限",
              success(res) {
                if (res.confirm) {
                  uni.openSetting();
                }
              },
            });
          }
        },
        complete() {
          wx.hideLoading({
            success: (res) => {},
          });
        },
      });
      // #endif
    },
  },
};
</script>
<style>
/* #ifdef MP-WEIXIN */
page {
  background: #f5f5f5;
}

/* #endif */
</style>
<style lang="scss" scoped>
page {
  background: #f5f5f5;
}

.bg {
  width: 100%;
}

.infobox1 {
  position: relative;

  .block1 {
    position: absolute;
    z-index: 1;
    top: 186rpx;
    width: 100%;

    .bgs {
      width: 600rpx;
      height: 800rpx;
      border-radius: 28rpx;
      margin: auto;
      position: relative;
    }

    .info1 {
      position: absolute;
      top: 40rpx;
      z-index: 1;
      left: 47rpx;
      // width: 600rpx;/4
      // margin: auto;

      image {
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
      }

      .tipbox1 {
        margin-left: 20rpx;
        width: calc(100% - 20rpx - 120rpx);
      }
    }

    .qrocde {
      position: absolute;
      z-index: 1;
      top: 300rpx;
      left: 50%;
      margin-left: -200rpx;
      width: 400rpx;
      // height: 488rpx;
    }
  }
}

.canvasBox {
  width: 100%;
  background: #fff;
  position: absolute;
  top: -11111111px;
}

.infobox3 {
  // position: fixed;
  // bottom: 0;
  // width: 100%;
  // background: #fff;
  // padding: 0 0 50rpx 0;

  .block1 {
    margin: 10rpx auto 0;
    background: var(--view-theme);
    border-radius: 40rpx;
    text-align: center;
    height: 80rpx;
    line-height: 80rpx;
    color: #fff;
    font-size: 28rpx;
    font-weight: bold;
    width: 600rpx;
  }

  .block2 {
    margin: 30rpx 0 0;

    .info1 {
      width: 32rpx;
    }

    .info2 {
      margin-left: 10rpx;

      .tip1 {
        color: #999;
        font-size: 24rpx;
      }

      .tip2 {
        font-size: 24rpx;
        color: #f65b49;
      }
    }
  }
}
.poster {
  border-radius: 28rpx;
  margin: auto;
  position: relative;
  z-index: 99;
}
.closeIcon {
  width: 50rpx;
  height: 50rpx;
  position: absolute;
  z-index: 99;
  top: -20rpx;
  right: 80rpx;
}
</style>
